<!--
 * @Author: Li Zengkun
 * @Date: 2022-06-29 07:31:24
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-01 20:17:12
 * @Description: 热销推荐
-->
<template>
  <div id="productPage">
    <!-- 主题图片 -->
    <!-- <div id="banner"></div> -->
    <!-- 导航标签 -->
    <div class="target_content">
      <div class="main-content">
        您的位置:

        <router-link to="/" class="target">首页</router-link>
        <i class="fa fa-angle-right"></i>
        <router-link to="/hotsell" class="target" style="color: #0072d4"
          >热销推荐</router-link
        >
      </div>
    </div>

    <!-- Part4 热销推荐产品 -->
    <div  class="best_seller_content" id="best_seller_content">
      <div class="main-content">
        <ul>
          <li class="invisible wow" id="rotate_card" style="animation-delay: 0s">
            <div class="front">
              <a href="#detail?type=hotsell&id=1" target="_blank"><img src="../assets/index_bs_img1.jpg" alt="" /></a>
            </div>
            <div class="back">
              <div class="title">
                <h2 style="color:#fff">霍巴特市区休闲皮划艇半日游</h2>
                <p>趣味十足的皮划艇之旅，带你领略高颜值的霍巴特海港！！</p>
              </div>
              <a href="#detail?type=hotsell&id=1" target="_blank"> 查看详情 </a>
            </div>
          </li>
          <li class="invisible wow" id="best_sellers_card2" style="animation-delay: 0.2s">
            <div class="text_box">
              <a href="#detail?type=hotsell&id=2" target="_blank"
                >[昆士兰州热带风情小] 汤斯维尔磁岛两天一晚探索之旅(含岛上巴士通票)</a
              >
              <p>来昆士兰州热带风情小镇汤斯维尔体验2天1晚磁岛之旅,深度感受磁岛的魅力!</p>
            </div>
            <a href="#detail?type=hotsell&id=2" class="small" target="_blank">
              <img src="../assets/index_best_seller2.jpg" alt="" />
              <div class="plus"><i class="fa fa-plus" aria-hidden="true"></i></div>
            </a>
          </li>
          <li class="invisible wow" id="best_sellers_card3" style="animation-delay: 0.4s">
            <a href="#detail?type=hotsell&id=3" class="small" target="_blank">
              <img src="../assets/index_best_seller3.jpg" alt="" />
              <div class="plus"><i class="fa fa-plus" aria-hidden="true"></i></div>
            </a>
            <div class="text_box">
              <a href="#detail?type=hotsell&id=3" target="_blank">悉尼夜间观光巴士之旅(环形码头+海港大桥+岩石区)</a>
              <p>双层观光巴士带您游览悉尼夜景，见识夜幕降临后悉尼光彩照人的另一面!</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="main-content" style="height: auto">
      <!-- 分页 -->
      <!-- <div class="pages">
        <a class="prev" @click="prev()">
          <i class="fa fa-angle-left"></i>
        </a>
        <a
          v-for="item in pages"
          :key="item"
          :class="item == 1 ? 'page_active page_item' : 'page_item'"
          @click="jumpBtn(item - 1)"
        >
          {{ item }}
        </a>
        <a class="next" @click="next()">
          <i class="fa fa-angle-right"></i>
        </a>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [{},{},{}],
      //   显示的标签列表
      selectProducts: [],
      //   开始的索引
      startIndex: 0,
      //   每页标签数量
      pagesnum: 8,
      //   总的页数
      pages: 0,
      //   选择的页码
      pageSelect: 0,
    };
  },
  components: {},
  mounted() {
    document.getElementsByTagName('title')[0].innerHTML = '云旅 | 热销推荐'
  },
  methods: {
   
  },
};
</script>

<style scoped>
@import "../assets/css/indexPage.css";

#productPage {
  height: auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  background-color: #fff;
}
#productPage #banner {
  height: 400px;
  background-image: url("../assets/main_img1.jpg");
  background-position: center;
}
#productPage .product-button {
  width: 100%;
  text-align: left;
}
</style>
